<template>
	<!-- 列表元素 -->
	<view class="item-box" @click="emit('click')" v-if="item">
		<view class="body">
			<image class="image" mode="aspectFill" @click="previewImage(item.url)" :src="item.url" v-if="item.url"
				@error="imageError($event,item)">
			</image>
			<view class="content">
				<view class="title" v-if="item.title">{{item.title}}</view>
				<template v-if="item.info && item.info.length > 0">
					<view class="dlbox" :class="vo.className" v-for="(vo,index) in item.info" :key="index">
						<view class="dt" v-if="vo.label">
							{{vo.label}}
						</view>
						<view class="dd" v-if="vo.value">
							{{vo.value}}
						</view>
					</view>
				</template>
			</view>
		</view>
		<view class="footer" v-if="item.action && item.action.length > 0">
			<view class="btn" @click.stop="vo.click" v-for="(vo,index) in item.action" :key="index">
				{{vo.name}}
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		item: {
			type: Object,
			default: null
		}
	})

	const emit = defineEmits(['click'])

	function imageError(e, item) {
		item.url = '/static/default.png'
	}

	function previewImage(url) {
		// 预览图片
		uni.previewImage({
			current: url,
			urls: [url],
			indicator: 'none'
		});
	}
</script>

<style lang="scss" scoped>
	.item-box {
		background-color: #fff;

		&+.item-box {
			margin-top: 24rpx;
		}

		.body {
			padding: 24rpx 32rpx;
			display: flex;

			.image {
				width: 144rpx;
				height: 144rpx;
				vertical-align: top;
				margin-right: 20rpx;
			}

			.content {
				flex: 1;
				overflow: hidden;

				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(#000000, 0.9);
					line-height: 48rpx;
				}

				.dlbox {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(#000000, 0.9);
					line-height: 48rpx;
					display: flex;
					align-items: center;

					.dt {
						white-space: nowrap;
					}

					.dd {
						flex: 1;
					}

					&.time {
						font-size: 22rpx;
						color: rgba(#999999, 0.9);
					}
				}
			}
		}

		.footer {
			border-top: 1rpx solid #e7e7e7;
			display: flex;
			align-items: center;

			.btn {
				height: 90rpx;
				flex: 1;
				overflow: hidden;
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				line-height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&+.btn {
					border-left: 1rpx solid #e7e7e7;
				}
			}
		}
	}
</style>
